<template>
  <div class='container'>
      <van-nav-bar
  title="不凡"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

<form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
</form>
<button @click="qingkong" class="qingkong">清空

</button>

<div class="dingwei">


      <ul><li v-for="item in keywords" :key="item.index">{{item.name}} </li></ul>
  </div>

<div class="lishi">
<ul>
    <li v-for="item in historyData " :key="item.index">{{item.keyword}} </li>
</ul>
</div>

<div class="resou">
<button v-for="item in hotKeywordList" :key="item.index" style="margin: 10px;" @click="jia(item.keyword)">
    {{item.keyword}}
</button>
</div>
  </div>
  
  
</template>

<script>
import {lishi,tishi,qingkong,tianjia} from "@/api/sousuo/index.js"
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
      // 这里存放数据
      return { value: '',
      historyData:[],
      defaultKeyword:[],
      hotKeywordList:[],
      keyword:'',
      keywords:''
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
lishi({openId: localStorage.getItem("openId"),}).then(res=>{
console.log(res);

this.historyData=res.historyData
 this.defaultKeyword=res.defaultKeyword
  this.hotKeywordList=res.hotKeywordList

})




    },
    // 生命周期 - 挂载完成（可以访问DOM元素）created：在创建vue对象时，当html渲染之前就触发；但是注意，只会触发一次
    mounted () {},
    // 这里存放数据
    beforeCreate () {},
    // 生命周期 - 挂载之前 
    beforeMount () {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    // 生命周期 - 更新之后 
    updated () {},
    // 生命周期 - 销毁之前 
    beforeDestroy() {},
    // 生命周期 - 销毁完成 
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发      activated：是组件被激活后的钩子函数，每次回到页面都会执行
    activated () {


    },
    // 方法集合
    methods: {

        jia(jia){

             tianjia({
        keyword:jia,
        openId: localStorage.getItem("openId")
    }).then(res=>{  lishi({openId: localStorage.getItem("openId"),}).then(res=>{
console.log(res);

this.historyData=res.historyData
 this.defaultKeyword=res.defaultKeyword
  this.hotKeywordList=res.hotKeywordList

})})
        },


        qingkong(){

            qingkong({
                openId: localStorage.getItem("openId")
            }).then(res=>{
                console.log('已清');
           lishi({openId: localStorage.getItem("openId"),}).then(res=>{
console.log(res);

this.historyData=res.historyData
 this.defaultKeyword=res.defaultKeyword
  this.hotKeywordList=res.hotKeywordList

})
    
            })
       
   
       },





           onSearch(val) {
    tianjia({
        keyword:this.value,
        openId: localStorage.getItem("openId")
    }).then(res=>{
lishi({openId: localStorage.getItem("openId"),}).then(res=>{
console.log(res);

this.historyData=res.historyData
 this.defaultKeyword=res.defaultKeyword
  this.hotKeywordList=res.hotKeywordList

})

    })
    },
    onCancel() {
      Toast('取消');
    },
        onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {
  value (newName, oldName) {

tishi({keyword:newName
,order:'asc'
}).then(res=>{
    console.log('tihsi',res);
    this.keywords=res.keywords


})

      
    }
  
        
    },
  }
</script>

<style scoped lang='scss'>
  /* @import url(); 引入公共css类 */
.dingwei{position: absolute;
top: 100px;
background-color: red;
width: 100%;
text-align: center;
}
.qingkong{float: right;
background-color: red;}
</style>